<%@page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>菜单权限设置</title>
<link href="${pageContext.request.contextPath}/ext3.1/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/ext3.1/css/data-view.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/ext3.1/css/ext-patch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/ext3.1/js/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext3.1/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext3.1/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext3.1/js/ajax.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext3.1/js/accredit.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext3.1/ux/exttools.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext3.1/ux/easygrid.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext3.1/ux/error.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext3.1/js/Ext.ux.form.ImgField.js"></script>
<script type="text/javascript">
	var oMenuWin, oMenuTree, oParentNode, oMenuForm, loadMask, store_sort;
	var oRoleGrid;
	/*
	 * 配置jdbcDao各参数
	 */
	var jdbcConfig = {
		Constant_TableName_ : 't_menu' //表名
	};
	Ext.BLANK_IMAGE_URL = '${pageContext.request.contextPath}/ext3.1/images/default/s.gif';
 	Ext.QuickTips.init();
	function Ready() {
		loadMask = new Ext.LoadMask(Ext.getBody(), {
			msg : "正在操作,请稍后......"
		});
		
		//菜单树 oMenuTree
		oMenuTree = new Ext.tree.TreePanel(
		{
			id : 'id_oMenuTree',
			border : false,
			frame : true,
			containerScroll : true,
			width : 200,
			split : true,
			margins : '4 0 2 4',
			collapsible : false,
			height : all_height,
			enableDD : false,
			useArrows : false,
			rootVisible : true,
			autoScroll : true,
			loader : new Ext.tree.TreeLoader(
					{
						dataUrl : '${pageContext.request.contextPath}/extTree/queryNode.html?key=menuTreeAdapter',
						listeners : {
							beforeload : function(treeLoader, node) {
								this.baseParams.id = node.id;
							}
						}
					}),
			listeners : {
				click : function(node, ev) {
					id = node.id;
					if (id == '-1') {
						return;
					}
					showRole(id);
				}

			}
		});
		//oMenuTree.load(oMenuTree.getRootNode());

		//创建右键菜单
		oMenuTree.on('contextmenu', createRCMenu);
		oMenuTree.addListener({
			'dblclick' : function(n, e) {
				viewMenuInfo(n, e);
			}
		});

		oMenuTree.on('render', function() {
			oMenuTree.el.dom.oncontextmenu = function(e) {
				window.event ? window.event.returnValue = false : e.preventDefault();
			};
		});

		//角色设置(Grid)
		oRoleGrid = new Ext.grid.EasyGridPanel(
		{
			id : 'id_oRoleGrid',
			width : all_width-200,
			height : all_height,
			region : 'center',
			key : 'grid_RoleConfig',
			margins : '4 4 2 1',
			baseParams : {
				init : true
			},
			pageSize : 10,
			isForceFit : true,
			isPage : true,
			callback : function(cm) {
				if (oRoleGrid.baseParams.init) 
				{
				} else if (oRoleGrid.baseParams.id) 
				{
					cm.setHidden(cm.findColumnIndex('角色编号'), true);
					cm.setHidden(cm.findColumnIndex('菜单编号'), true);
					cm.setRenderer(
						cm.findColumnIndex('是否授权'),
						function(value, p, record) {
							if (record.data.代码 == 'ROLE_USER') {
								return "<input type='checkbox' checked='checked' disabled='disabled' />";
							} else {
								return value == '1' ? "<input type='checkbox' onclick=\"RoleDelete('"
										+ record.data.菜单编号
										+ "','"
										+ record.data.角色编号
										+ "')\" checked='checked' />"
										: "<input type='checkbox' onclick=\"RoleAdd('"
												+ record.data.菜单编号
												+ "','"
												+ record.data.角色编号
												+ "')\" />";
							}
					});
				}
			}
		});

		//menuDataView
		var oMenuIconStore = new Ext.data.JsonStore(
		{
			url : '${pageContext.request.contextPath}/menu/getIconTree.html',
			root : 'images',
			totalProperty : 'totalCount',
			fields : [ {
				name : 'name'
			}, {
				name : 'path'
			} ],
			baseParams : {
				start : 0,
				limit : 20
			},
			autoLoad : true
		});
		var menuViewTpl = new Ext.XTemplate(
			'<tpl for=".">',
			'<div class="thumb-wrap" id="{name}">',
			'<div class="thumb"><img src="{path}" ext:qtip="{name}"></div>',
			'<span class="x-editable">{shortName}</span></div>', '</tpl>',
			'<div class="x-clear"></div>'
		);
		var oMenuIconViewPanel = new Ext.Panel({
			id : 'images-view',
			frame : true,
			width : 600,
			height : 280,
			title : '选择菜单图标',
			bbar : new Ext.PagingToolbar({
				afterPageText : '/ {0}',
				beforePageText : '页',
				firstText : '第一页',
				prevText : '前一页',
				nextText : '后一页',
				lastText : '最后一页',
				refreshText : '刷新',
				store : oMenuIconStore,
				pageSize : 20,
				displayInfo : true,
				displayMsg : '显示 {0} - {1} 条记录，共 {2} 条',
				emptyMsg : "没有数据"
			}),
			items : new Ext.DataView({
				id : 'id_dataView',
				store : oMenuIconStore,
				tpl : menuViewTpl,
				height : 280,
				multiSelect : true,
				overClass : 'x-view-over',
				itemSelector : 'div.thumb-wrap',
				prepareData : function(data) {
					data.shortName = Ext.util.Format.ellipsis(data.name, 10);
					return data;
				},
				listeners : {
					selectionchange : {
						fn : function(dv, nodes) {
							if (nodes != null && nodes[0] != null)
								oMenuIconViewPanel.setTitle('菜单图标: ' + nodes[0].id);
						}
					}
				}
			})
		});
		Ext.getCmp('id_dataView').addListener({
			'dblclick' : function(dv, index, node, e) 
			{
				var iconPath = dv.getRecord(node).data.path;
				oMenuForm.getForm().findField('PIC_').setValue(iconPath);
				oSelectIconWin.hide();
				document.getElementById('id_img').src = iconPath;
				document.getElementById('id_img').onclick = function() {
					ShowIconWin();
				};
			}
		});

		//end -- MenuDataView

		//oTreePanel
		var oTreePanel = new Ext.TabPanel({

			id : 'id_oTreePanel',
			width : 200,
			height : all_height,
			activeTab : 0,
			region : 'west',
			margins : '4 2 2 2',
			items : [ {
				id : 'id_menu',
				border : false,
				title : '菜单管理'
			}, {
				id : 'id_page',
				border : false,
				title : '首页管理'
			} ],
			listeners : {
				'tabchange' : function(panel, tab) {

					if (tab.id == 'id_menu') {
						oMenuTree.setRootNode(new Ext.tree.AsyncTreeNode({
							expanded : true,
							id : '-1',
							text : '菜单管理'
						}));
						tab.add(oMenuTree);
						tab.doLayout();
					} else if (tab.id == 'id_page') {
						oMenuTree.setRootNode(new Ext.tree.AsyncTreeNode({
							expanded : true,
							id : '1',
							text : '首页管理'
						}));
						oMenuTree.expandAll();
						tab.add(oMenuTree);
						tab.doLayout();
					}
				}
			}
		});
		//主面板
		var oPanel = new Ext.Panel({

			id : 'id_oPanle',
			width : all_width,
			height : all_height,
			renderTo : 'content',
			layout : 'border',
			items : [ oTreePanel, oRoleGrid ],
			frame : false,
			border : false
		});
		// store_sort
		store_sort = new Ext.data.JsonStore(
				{
					url : '${pageContext.request.contextPath}/menu/doSort.html',
					root : 'datas',
					autoLoad : false,
					fields : [ {
						name : 'name'
					}, {
						name : 'valtext'
					} ]
				});
		store_sort.on({
			'load' : function(store, records, options) {
				var sortInfo = store.reader.jsonData.sortInfo;
				if (sortInfo == '0' || sortInfo == '-1') {
					Ext.getCmp('id_sortLabel').hide();
				} else {
					Ext.getCmp('id_sortLabel').show();
				}
				oMenuForm.getForm().findField('POSITION_').setValue(
						store_sort.reader.jsonData.sortInfo);
			}
		});
		//菜单表单
		oMenuForm = new Ext.form.FormPanel({

			id : 'id_oMenuForm',
			baseCls : 'x-plain',
			border : false,
			defaults : {
				width : 400
			},
			labelAlign : 'right',
			listeners : {
				'render' : EnterKeyListener
			},
			items : [ {
				xtype : 'hidden',
				id : 'ID_',
				name : 'ID_'
			}, {
				xtype : 'hidden',
				id : 'PID_',
				name : 'PID_'
			}, {
				xtype : 'textfield',
				name : 'NAME_',
				id : 'id_name',
				fieldLabel : '名称'
			}, {
				xtype : 'textfield',
				id : "id_URL_",
				name : 'URL_',
				fieldLabel : '访问地址'
			}, {
				xtype : 'textfield',
				name : 'PARAM_',
				fieldLabel : '附带参数'
			}, {
				width : 490,
				layout : 'column',
				id : 'id_hd1',
				frame : false,
				baseCls : 'x-plain',
				defaults : {
					layout : 'form',
					height : 25,
					fram : false,
					baseCls : 'x-plain'
				},
				items : [ {
					columnWidth : .7,
					items : [ {
						xtype : 'textfield',
						name : 'PIC_',
						width : 250,
						fieldLabel : '图标地址'
					} ]
				}, {
					columnWidth : .1,
					items : [ {
						xtype : 'button',
						text : '选择',
						handler : function() {
							ShowIconWin();
						}
					} ]
				}, {
					columnWidth : .13,
					items : [ {
						xtype : 'label',
						fieldLabel : '当前图标',
						labelStyle : 'text-align:left'
					} ]
				}, {
					columnWidth : .07,
					id : 'id_tag',
					items : [ {
						xtype : 'imgfield',
						id : 'id_img',
						src : '${pageContext.request.contextPath}/images/menuIcon/add_tree_node.png',
						callBack : ShowIconWin,
						qtip : '单击更换图标',
						style : {
							width : '17px',
							height : '17px'
						}
					} ]
				} ]
			}, {
				width : 490,
				layout : 'column',
				id : 'id_hd2',
				frame : false,
				baseCls : 'x-plain',
				defaults : {
					layout : 'form',
					height : 25,
					fram : false,
					baseCls : 'x-plain'
				},
				items : [ {
					columnWidth : .6,
					items : [ {
						xtype : 'combo',
						name : 'POSITION_',
						width : 200,
						fieldLabel : '排在',
						store : store_sort,
						triggerAction : "all",
						mode : "local",
						displayField : "name",
						valueField : "valtext",
						listeners : {
							'select' : function(com, record, index) {
								var value = com.getValue();
								if (value == '0' || value == '-1')
									Ext.getCmp('id_sortLabel').hide();
								else
									Ext.getCmp('id_sortLabel').show();
							}
						}
					} ]
				}, {
					columnWidth : .2,
					id : 'id_sortLabel',
					items : [ {
						xtype : 'label',
						fieldLabel : '之后',
						labelStyle : 'text-align:left',
						labelSeparator : ''
					} ]
				} ]
			}, {
				xtype : 'textarea',
				width : 400,
				height : 100,
				name : 'DESCRIPTION_',
				fieldLabel : '描述'
			} ],
			frame : false
		});
		//菜单窗口 确定按钮
		var oButtonSave = new Ext.Button(
				{

					id : 'id_oButtonSave',
					text : '提交',
					listeners : {
						'click' : function() {
							var baseParams;
							var url = '${pageContext.request.contextPath}/menu/doInsertOrModifyMenu.html';
							baseParams = oMenuForm.getForm().getValues();
							var valtext = oMenuForm.getForm().findField('POSITION_').getValue();
							baseParams.POSITION_ = valtext;
							doAjaxRequest(url, baseParams);
						}
					}
				});
		//菜单窗口 取消按钮
		var oButtonCancel = new Ext.Button({

			id : 'id_oButtonCancel',
			text : '重置',
			handler : function() {
				oMenuForm.getForm().reset();
			}
		});
		//菜单窗口关闭按钮
		var oButtonClose = new Ext.Button({

			id : 'id_oButtonClose',
			text : '关闭',
			handler : function() {
				oMenuWin.hide();
			}
		});

		//SelectIconWin
		var oSelectIconWin = new Ext.Window({

			id : 'id_oSelectIconWin',
			width : 600,
			height : 280,
			layout : 'fit',
			closeAction : 'hide',
			items : [ oMenuIconViewPanel ]
		});
		//新建菜单窗口
		oMenuWin = new Ext.Window({

			id : 'id_oMenuWin',
			width : 500,
			height : 315,
			layout : 'fit',
			closeAction : 'hide',
			defaults : {
				labelWidth : 70,
				anchor : '90%'
			},
			items : [ oMenuForm ],
			buttons : [ oButtonSave, oButtonCancel, oButtonClose ],
			frame : true,
			border : false
		});

	} //end ready
	//树的右键菜单
	function createRCMenu(node, e) 
	{

		if (Ext.getCmp('id_RCMenu') != undefined) 
		{
			Ext.getCmp('id_RCMenu').destroy();
		}
		var oRCMenu = new Ext.menu.Menu(
		{
			id : 'id_RCMenu',
			items : [
					{
						id : 'add',
						text : '添加',
						icon : "${pageContext.request.contextPath}/images/icon/add_tree_node.png",
						handler : function() {
							addNewMenuItem(node, e);
						}
					},
					{
						id : 'update',
						text : '修改',
						icon : "${pageContext.request.contextPath}/images/icon/edit_tree_node.png",
						handler : function() {
							modifyMenuItem(node, e);
						}
					},
					{
						id : 'delete',
						text : '删除',
						icon : "${pageContext.request.contextPath}/images/icon/delete_1.gif",
						handler : function() {
							deleteMenuItem(node, e);
						}
					} ]
		});
		if (node.id == '-1' || node.id == '1') {
			oRCMenu.items.get('update').hidden = true;
			oRCMenu.items.get('update').hidden = true;
		}
		if (node.parentNode) {
			if (node.parentNode.id == '1') {
				oRCMenu.items.get('add').hidden = true;
			}
		}

		oRCMenu.showAt(e.getXY());
	}
	//预览菜单信息
	function viewMenuInfo(node, e) {
		if (node.id == 1 || node.id == -1)
			return;
		oParentNode = node.parentNode;
		store_sort.setBaseParam('pid', null);
		if (oParentNode)
			store_sort.setBaseParam('params', oParentNode.id + ',' + node.id);
		store_sort.reload();
		var title = '';
		var flag = '';
		if (oParentNode.id == 1) {
			//add index page
			title = '首页信息预览(' + node.text + ')';
			flag = 'pageForm';
		} else {
			// add  menu
			title = '菜单信息预览(' + node.text + ')';
			flag = 'menuForm';
		}
		showMenuWin(title);
		changeForm(flag);
		var params = node.attributes;
		var param = {
			PID_ : params.pid_,
			ID_ : params.id,
			NAME_ : node.text,
			URL_ : params.url_,
			PIC_ : params.pic_,
			PARAM_ : params.param_,
			DESCRIPTION_ : params.description_
		};
		oMenuForm.getForm().setValues(param);
		document.getElementById('id_img').src = param.PIC_;
		setReadOnly(true);
	}
	//增加子菜单
	function addNewMenuItem(node, e) {
		oParentNode = node;
		store_sort.setBaseParam('pid', oParentNode.id);
		store_sort.reload();
		var title = '';
		var flag = '';
		if (node.id == 1) {
			//add index page
			title = '增加新首页';
			flag = 'pageForm';
		} else {
			// add  menu
			title = '增加新菜单,父级菜单为:(' + node.text + ')';
			flag = 'menuForm';
		}
		showMenuWin(title);
		changeForm(flag);
		setReadOnly(false);
		oMenuForm.getForm().reset();
		oMenuForm.getForm().findField('PID_').setValue(node.id);
	}
	//修改子菜单
	function modifyMenuItem(node, e) {
		oParentNode = node.parentNode;
		store_sort.setBaseParam('pid', null);
		store_sort.setBaseParam('params', oParentNode.id + ',' + node.id);
		store_sort.reload();
		var title = '';
		var flag = '';
		if (oParentNode.id == 1) {
			//add index page
			title = '修改首页(' + node.text + ')';
			flag = 'pageForm';
		} else {
			// modify  menu
			title = '修改菜单(' + node.text + ')';
			flag = 'menuForm';
		}
		showMenuWin(title);
		changeForm(flag);
		setReadOnly(false);
		var params = node.attributes;
		var param = {
			PID_ : params.pid_,
			ID_ : params.id,
			NAME_ : node.text,
			URL_ : params.url_,
			PIC_ : params.pic_,
			PARAM_ : params.param_,
			DESCRIPTION_ : params.description_
		};
		oMenuForm.getForm().setValues(param);
		document.getElementById('id_img').src = param.PIC_;

	}
	//删除子菜单
	function deleteMenuItem(node) {

		if (!node)
			return;
		oParentNode = node.parentNode;
		var tilte =  node.hasChildNodes() ? '该菜单下具有子菜单,是否一起删除?':'确定删除?';
		Ext.Msg.confirm(
			'提示',
			title,
			function(btn) {
				if (btn == 'yes') {
					var url = '${pageContext.request.contextPath}/menu/doDeleteMenu.html';
					var ID_ = node.id;
					Ext.Ajax.request({
						url : url,
						params : {
							ID_ : ID_
						},
						success : function(response, options) {
							var responseArray = Ext.util.JSON.decode(response.responseText);
							if (responseArray.success == true) {
								oMenuTree.getLoader().load(oParentNode);
								oMenuWin.hide();
								oParentNode.expand();
							} else {
								Ext.Msg.alert('提示','操作失败,请检查数据库连接');
							}
						}
					});

				} else
					return;
		});
	}
	//增加权限
	function RoleAdd(MenuID_, RoleID_) {
		var url = '${pageContext.request.contextPath}/menu/doAddRole.html';
		var params = {
			ROLE_ID_ : RoleID_,
			MENU_ID_ : MenuID_
		};
		doAddOrDeleteRole(url, params, MenuID_);
	}
	//删除权限
	function RoleDelete(MenuID_, RoleID_) {
		var url = '${pageContext.request.contextPath}/menu/doDeleteRole.html';
		var params = {
			ROLE_ID_ : RoleID_,
			MENU_ID_ : MenuID_
		};
		doAddOrDeleteRole(url, params, MenuID_);
	}
	//显示菜单填写窗口
	showMenuWin = function showMenuWin(title) {
		if (oMenuWin) {
			oMenuWin.setTitle(title);
			oMenuWin.show();
		}
	}
	//设置只读
	function setReadOnly(flag) {
		if (flag == true) {
			oMenuForm.items.each(function(item) {
				item.getEl().dom.readOnly = true;
			});
			oMenuWin.buttons[0].hide();
			oMenuWin.buttons[1].hide();
		} else {
			oMenuForm.items.each(function(item) {
				item.getEl().dom.readOnly = false;
			});
			oMenuWin.buttons[0].show();
			oMenuWin.buttons[1].show();
		}
	}
	//设置hidden
	function changeForm(flag) {
		if (flag == 'menuForm') {
			Ext.getCmp('id_hd1').show();
			Ext.getCmp('id_hd2').show();
		} else if (flag == 'pageForm') {
			Ext.getCmp('id_hd1').hide();
			Ext.getCmp('id_hd2').hide();

		}
	}
	//根据菜单Id值 显示相应的权限
	function showRole(menuID) {
		oRoleGrid.setParams({
			id : menuID,
			init : null
		});
		oRoleGrid.parseHeader = true;
		oRoleGrid.load();
	}
	//监听回车事件
	function EnterKeyListener(input) {
		var EMap = new Ext.KeyMap(input.getEl(), {
			key : Ext.EventObject.ENTER,
			fn : function() {
				oButtonSave.fireEvent('click');
			},
			scope : oMenuForm
		});
	}
	//Ajax请求 doAddOrDeletMenu
	function doAjaxRequest(url, config) {
		loadMask.show();
		oMenuWin.hide();
		Ext.Ajax.request({
			url : url,
			params : Ext.apply(config, jdbcConfig),
			success : function(response, options) {
				var responseArray = Ext.util.JSON.decode(response.responseText);
				if (responseArray.success == true) {
					loadMask.hide();
					oMenuTree.getLoader().load(oParentNode, function() {
						oParentNode.expand();
						if (oParentNode.id != -1)
							oParentNode.eachChild(function(n) {
								n.expand();
							});
					}, this);
				} else {
					Ext.Msg.alert('提示', '操作失败,请检查数据库连接');
				}
			},
			failure : function(response, options) {
				loadMask.hide();
				Ext.Msg.alert('提示', '操作失败,请检查数据库连接');
			}
		});
	}

	//doAddOrDeleteRole
	function doAddOrDeleteRole(url, config, id) {
		loadMask.show();
		Ext.Ajax.request({
			url : url,
			params : Ext.apply(config, jdbcConfig),
			success : function(response, options) {
				var responseArray = Ext.util.JSON
						.decode(response.responseText);
				if (responseArray.success == true) {
					loadMask.hide();
					oGrid = Ext.getCmp('id_oRoleGrid');
					oGrid.setParams({
						id : id,
						init : null
					});
					oGrid.load();
				} else {
					loadMask.hide();
					Ext.Msg.alert('提示', '操作失败,请检查数据库连接');
				}
			}
		});

	}
	//选择图标窗口
	function ShowIconWin() {
		Ext.getCmp('id_oSelectIconWin').show();
	}
	//加载Ready
	Ext.onReady(Ready);
</script>

</head>
<body>

</body>
</html>